<template>
    <div :id="id">
        <!-- <div class="component-group"
            :class="(element.data.children.indexOf(childrenElement) == index && status.isChildrenMove()) ? 'active' : ''"
            v-for="(item, index) in element.data.children" :key="index" :style="{
                ...style.getBoxStyle(item),
                top: util.toInteger(item.data.groupStyle.top.pixel * element.style.height.pixel) + 'px',
                left: util.toInteger(item.data.groupStyle.left.pixel * element.style.width.pixel) + 'px',
                height: util.toInteger(item.data.groupStyle.height.pixel * element.style.height.pixel) + 'px',
                width: util.toInteger(item.data.groupStyle.width.pixel * element.style.width.pixel) + 'px',
            }" @mousedown.stop="boxChildrenMouseDown($event, item)">
            <component :key="item.id" :is="item.component" :mode="mode" :pageList="pageList" :element="item"
                :id="system.SYSTEM_EDIT_ELEMENT + item.id" :style="{
                    ...style.getElementStyle(item),
                    height: util.toInteger(item.data.groupStyle.height.pixel * element.style.height.pixel) + 'px',
                    width: util.toInteger(item.data.groupStyle.width.pixel * element.style.width.pixel) + 'px',
                }" />
        </div> -->
    </div>
</template>

<script>
import register from '@/js/main/register.js';
import system from '@/js/main/system.js';
import vueMixin from "@/js/main/vueMixin.js";
import style from '@/js/util/style.js';
import util from '@/js/util/util.js';
import store from '@/js/store/state.js';
import base from '@/js/main/attribute/base.js';
import status from '@/js/main/status.js';
import history from '@/js/main/history.js';
import line from '@/js/main/line.js';

export default {
    mixins: [vueMixin],
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        },
        mode: {
            type: Number
        }
    },
    data() {
        return {
            system: system,
            style: style,
            util: util,
            status: status,
            currentElementList: store.getCurrentElementList(),
            canvas: store.getCanvas(),
            childrenElement: null,
            timer: null,
            mapIdCound: {},
            firstTime: 0,
            secondTime: 0,
        }
    },
    methods: {
        redraw() {
            for (let i = 0; i < this.element.attribute.children.length; i++) {
                let item = this.element.attribute.children[i];
                item.style.width.pixel = item.attribute.pOption.groupStyle.width.pixel * this.element.style.width.pixel;
                item.style.height.pixel = item.attribute.pOption.groupStyle.height.pixel * this.element.style.height.pixel;
            }
        },
        boxChildrenMouseDown(e, element) {
            // if (this.mode === 1) {
            //     if (e.button === 0) {
            //         if (mapIdCound[element.id]) {
            //             mapIdCound[element.id] = 1;
            //         }
            //         this.firstTime = new Date().getTime();
            //         // if (this.leftDownCount === 1) {
            //         //     this.leftDownCount = 0;
            //         // }
            //         this.leftDownCount++;
            //         console.log(this.leftDownCount);
            //     }
            // }
            // if (e.button === 0) {
            //     if (this.leftDownCount === 0)//当此全局变量为0时，说明鼠标还没有按下过
            //     {
            //         this.leftDownCount++;//定义一个全局变量 每按下一次此变量加1以此判断按下了几次
            //         this.leftDownInterval = setTimeout(() => {
            //             console.log(1);
            //             // this._compareLeftDownFun();
            //         }, 500);
            //     } else {
            //         this.leftDownCount++;//当鼠标多次按下时，此全局变量依次加一
            //     }
            // }
        },
        setBoxChildrenElement(e, element) {
            if (status.isBoxMove()) {
                e.stopPropagation();
                if (base.validateBox(element).length == 0) {
                    store.setCurrentElementList([element]);
                    this.childrenElement = element;
                    status.setBoxMove(false);
                    status.setChildrenMove(true);

                    let elementStartList = {
                        top: {
                            pixel: element.style.top.pixel,
                            unit: element.style.top.unit
                        },
                        left: {
                            pixel: element.style.left.pixel,
                            unit: element.style.left.unit
                        }
                    };
                    let startX = e.clientX;
                    let startY = e.clientY;
                    let hasMove = false;
                    let _this = this;
                    let moveX = startX;
                    let moveY = startY;
                    let move = function (e) {
                        hasMove = true;
                        let curX = e.clientX;
                        let curY = e.clientY;
                        moveX = curX;
                        moveY = curY;
                        let offsetX = util.toInteger((curX - startX) / store.getScale());
                        let offsetY = util.toInteger((curY - startY) / store.getScale());
                        let left = offsetX + elementStartList.left.pixel;
                        let top = offsetY + elementStartList.top.pixel;
                        base.setTopPixel(element, _this.canvas.height, top, true);
                        base.setLeftPixel(element, _this.canvas.width, left, true);
                    };
                    let up = function (e) {
                        document.removeEventListener('mousemove', move);
                        document.removeEventListener('mouseup', up);
                        status.setBoxMove(true);
                        hasMove && history.addHistory(store.clone(), 3);
                        hasMove && line.setElementList(element);
                        line.removeLine();
                    };
                    document.addEventListener('mousemove', move);
                    document.addEventListener('mouseup', up);
                }
            }
        }
    },
    created() {
        register.addComponent(this);
    },
    destroyed() {
        register.removeComponent(this);
    }
};
</script>

<style lang="scss" scoped>
.component-group {
    position: absolute;
}

.active {
    outline: 1px solid #70c0ff;
    user-select: none;
}
</style>